<template>
  <div class="musicList" @click="pause">
    <div class="back-img bg bg-blur" :style="backgroundUrl">
      <img :src="bgcImg" alt />
    </div>
    <div class="stuff">
      <!-- 返回按钮 -->
      <div class="go-back" @click.stop="goBack">
        <span>＜</span>
      </div>

      <!-- 那条杆图片 -->
      <div class="pole" :style="{transform:rotate}">
        <img src="../assets/musicListPic/needle-ip6.png" alt />
      </div>
      <!-- cd图片和背景图片 -->
      <div class="cd" ref="pic">
        <img src="../assets/musicListPic/disc-plus.png" alt />
        <div class="back-pic">
          <img :src="bgcImg" alt />
        </div>
      </div>
      <!-- 中间播放按钮 -->
      <div class="musicPlay" ref="playing" @click.stop="playBtn">
        <div class="circle">
          <span>▲</span>
        </div>
      </div>
      <!-- 歌曲名，歌手名 -->
      <div class="song-msg">
        <p>《 {{musicName}} 》</p>
        <p>—— {{musicSinger[0]}}</p>
        <lyric v-bind:lyricIdx="playLyricIdx"></lyric>
      </div>
      <!-- 上一首 下一首 暂停 -->
      <div class="next">
        <div class="next-l" @click.stop="lastSong">
          <i class="iconfont">&#xe601;</i>
        </div>
        <div class="next-r" @click.stop="nextSong">
          <i class="iconfont">&#xe600;</i>
        </div>
        <div class="stop-btn" ref="stopBtn">
          <i class="iconfont">&#xe611;</i>
        </div>
        <div class="play-btn" ref="playBtn" @click.stop="playBtn">
          <i class="iconfont">&#xe695;</i>
        </div>
      </div>
      <!-- 滚动条 -->
      <div class="progress">
        <van-slider
          v-model="value"
          @input="onInput"
          active-color="#f44"
          @drag-start="onStart"
          @drag-end="onEnd"
        ></van-slider>
        <div class="current">{{current}}</div>
        <div class="duration">{{duration}}</div>
      </div>

      <!-- <button class="open">打开</button>
      <button class="down-load">下载</button>-->
    </div>
  </div>
</template>

<script>
import lyric from "./lyric";

export default {
  name: "playPage",
  props: ["bgcImg", "musicName", "musicSinger"],
  components: {
    lyric
  },
  data() {
    return {
      endUrl: "",
      lyricUrl: "",
      // 判断歌播放与暂停
      isPlaying: true,
      backgroundUrl: {
        background: null,
      },
      musicUrl: "", // 歌曲url
      allSong: "",
      musicCurrent: "", //歌曲当前时长
      musicDuration: "", //歌曲总时长
      current: "", //歌曲换算后的当前时长
      duration: "", //歌曲换算后总时长
      value: 0, //滑块百分比
      throttleFlag: true, //节流开关
      playLyricIdx: 0,
      songName: "",
      singerName: "",
      songIdx: "",
      rotate: ""
    };
  },
  watch: {
    musicDuration: {
      handler: function() {
        let m = parseInt(this.musicDuration / 60);
        let s = parseInt(this.musicDuration % 60);
        s = s < 10 ? "0" + s : s;
        this.duration = m + ":" + s;
      }
    },
    musicCurrent: {
      handler: function() {
        this.readIdx(this.playLyricIdx);
      }
    },
    datas: {
      handler: function() {
        // console.log(this.$root.$children[0].isplay);
        this.$root.$children[0].isplay = true;
      }
    },
    runStatus: {
      handler: function() {
        if (this.$root.$children[0].isplay) {
          this.audio.play();
          this.$emit("startBtn");
          this.rotate = "rotateZ(0deg)";
          this.$refs.pic.classList.remove("back-ani"); // 控制背景转动
          this.$refs.playing.style.display = "none";
          this.$refs.playBtn.style.display = "none";
          this.$refs.stopBtn.style.display = "block";
        }
        if (!this.$root.$children[0].isplay) {
          this.audio.pause();
          this.$refs.playing.style.display = "block";
          this.$refs.stopBtn.style.display = "none";
          this.$refs.playBtn.style.display = "block"; // 下方的播放按钮
          this.$emit("pauseBtn");
          this.$refs.pic.classList.add("back-ani"); // 控制背景转动
          this.rotate = "rotateZ(-22deg)";
        }
      }
    }
  },
  methods: {
    goBack() {
      this.$root.$children[0].$refs.songPage.style.transform =
        "translateY(-100vh)";
    },
    // 歌曲暂停
    pause() {
      this.$root.$children[0].isplay = false;
    },
    // 歌曲播放
    playBtn() {
      this.$root.$children[0].isplay = true;
    },
    nextSong() {
      if (this.$store.state.index < this.$store.state.datas.length - 1) {
        this.$emit("addIdx");
        let id = this.$store.state.datas[this.$store.state.index].id;
        // 获取歌曲url
        this.musicUrl = "https://music.163.com/song/media/outer/url?id=" + id;
        this.audio.src = this.musicUrl;
        this.audio.play();
      } else {
        this.$store.state.index = 0;
        let id = this.$store.state.datas[this.$store.state.index].id;
        // 获取歌曲url
        this.musicUrl = "https://music.163.com/song/media/outer/url?id=" + id;
        this.audio.src = this.musicUrl;
        this.audio.play();
      }
    },
    lastSong() {
      if (this.$store.state.index > 0) {
        this.$emit("minusIdx");
        let id = this.$store.state.datas[this.$store.state.index].id;
        // 获取歌曲url
        this.musicUrl = "https://music.163.com/song/media/outer/url?id=" + id;
        this.audio.src = this.musicUrl;
        this.audio.play();
      } else {
        this.$store.state.index = this.$store.state.datas.length - 1;
        let id = this.$store.state.datas[this.$store.state.index].id;
        // 获取歌曲url
        this.musicUrl = "https://music.163.com/song/media/outer/url?id=" + id;
        this.audio.src = this.musicUrl;
        this.audio.play();
      }
    },
    onInput(value) {
      this.audio.currentTime = parseInt((value * this.musicDuration) / 100);
    },
    onStart() {},
    onEnd() {
      this.readIdx(0);
    },
    readIdx(num) {
      if (this.lyricS != "") {
        //按顺序寻找歌词
        for (let i = num; i < this.lyricS.length; i++) {
          if (i == this.lyricS.length - 1) {
            //找到最后一个位置,判断时间 假如还找不到就必定在前面
            if (this.musicCurrent >= this.lyricS[i].timeSong) {
              this.playLyricIdx = i;
            } 
            //因寻找到最后也寻找不到，则从0开始寻找
            else {
              for (let j = 0; j < this.lyricS.length; j++) {
                if (
                  this.musicCurrent > this.lyricS[j].timeSong &&
                  this.musicCurrent < this.lyricS[j + 1].timeSong
                ) {
                  this.playLyricIdx = j;
                  break;
                }
              }
            }
          } 
          else {
            if (
              this.musicCurrent > this.lyricS[i].timeSong &&
              this.musicCurrent < this.lyricS[i + 1].timeSong
            ) {
              this.playLyricIdx = i;
              break;
            }
          }
        }
      }
    }
  },
  async created() {
    // ----------获取歌曲-----------
    // 所有音乐的数组
    (this.allSong = this.$store.state.inputAllMusic),
      this.audio.addEventListener("timeupdate", e => {
        if (this.throttleFlag) {
          this.throttleFlag = false; //节流开关
          this.musicCurrent = e.target.currentTime; //当前时间
          this.musicDuration = e.target.duration; //总时长
          let m = parseInt(this.musicCurrent / 60); //转换分钟
          let s = parseInt(this.musicCurrent % 60); //转换秒
          s = s < 10 ? "0" + s : s; //秒数小于10 前面+0
          this.current = m + ":" + s;
          this.value = parseInt((this.musicCurrent / this.musicDuration) * 100); //滑块百分比
          setTimeout(() => {
            this.throttleFlag = true;
          }, 400);
        }
      });
  },
  computed: {
    backPic() {
      return this.$store.state.Hot_music_list.inputval;
    },
    datas() {
      return this.$store.state.datas;
    },
    runStatus() {
      return this.$root.$children[0].isplay;
    },
    lyricS() {
      // 获取歌词
      if (this.$store.state.lyric == null) {
        return "";
      } else {
        // return this.$store.state.datas[this.$store.state.index].lyric;
        return this.$store.state.lyric;
      }
    }
  }
};
</script>

<style lang="scss">
@import "../assets/font/audioplay/download/font_1902647_lyzr3qr4wi/iconfont.css";
@import "../assets/scss/HotMusicList.scss";
@import "../assets/scss/musiclist.scss";
</style>
